<template>
  <ul class="treelist">
    <li :class="{'parent': root.children.length}" v-for="root in treenodes" type="root">
      <span class="treeitem" @click.stop="toggle">
        <i v-if="root.icon" :class="root.icon"></i>
        <span class="mr-2">{{root.name}}</span>
        <span class="mr-auto text-muted">{{root.code}}</span>
        <span class="column">
          <a class="text-primary" @click.stop="go(root, this)"><i class="fa fa-pencil"></i>编辑</a>
          <a class="text-danger"><i class="fa fa-trash"></i>删除</a>
        </span>
      </span>
      <children v-if="root.children.length" :parent="root"></children>
    </li>
  </ul>
</template>
<!--
  权限树形列表
-->
<script>

  /* 展开/收缩子元素 */
  function toggle (e) {
    e.currentTarget.parentNode.classList.toggle('open')
  }

  function go (item, ctx) {
    console.log(ctx)
  }

  export default {
    name: 'treeview',
    props: ['treenodes'],
    methods: {toggle, go},
    components: {
      children: {
        name: 'children',
        props: ['parent', 'checked'],
        template: `<ul>
          <li :class="{'parent': child.children.length}" v-for="child in parent.children">
            <span class="treeitem" @click.stop="toggle">
              <i v-if="child.icon" :class="child.icon"></i>
              <span class="mr-2">{{child.name}}</span>
              <span class="mr-auto text-muted">{{child.code}}</span>
              <span class="column">
                <a class="text-primary" @click.stop="go(child, this)"><i class="fa fa-pencil"></i>编辑</a>
                <a class="text-danger"><i class="fa fa-trash"></i>删除</a>
              </span>
            </span>
            <children v-if="child.children.length" :parent="child"></children>
          </li>
        </ul>`,
        methods: {toggle, go}
      }
    }
  }
</script>

<style>
  .treelist { list-style: none; padding: 0 0 1rem }
  .treelist > li:before, .treelist > li:after { display: none !important }
  .treelist ul { padding: 10px 0 10px 53px; position: relative; list-style: none; margin: 0; display: none }
  .treelist .open > ul { display: block }
  .treelist .parent > .treeitem::before { margin-right: .5rem; text-align: center; width: 1.5rem }
  .treelist .parent > .treeitem::before { font-family: themify; content: '\E65D' }
  .treelist .parent.open > .treeitem::before { content: '\E65F' }
  .treelist .parent:last-child::before { border-top: 1px solid #e2e2e2; background: #fff; height: 100% }
  .treelist ul:before { background: #e2e2e2; position: absolute; height: calc(100% - 33px); content: ''; width: 1px; left: 23px; top: -.5rem }
  .treelist li { position: relative }
  .treelist li:before,
  .treelist li:after { background: #e2e2e2; position: absolute; display: block; content: ''; top: 22px }
  .treelist li:before { height: 1px; width: 30px; left: -30px }
  .treelist li:after { border-radius: 50%; margin-top: -2px; left: -32px; height: 5px; width: 5px }
  .treelist .treeitem { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; border: 1px solid #ddd; margin-bottom: .5em; border-radius: 4px; position: relative; padding: .625rem; color: #777 }
  .treelist .treeitem > i { margin-right: .25rem; text-align: center; width: 1.1rem }
  .treelist .treeitem:hover, .treelist .treeitem:focus { text-decoration: none; background: #f6f6f6; color: #333 }
</style>